<template>
  <div class="box">
    <template v-for="(item, _index) in busData.content" :key="_index">
      <div class="_flex _flex-start line _cart _p10 _flex-a-stretch">
        <div
          class="line-title-box _flex"
          :class="{ 'line-title-01': _index % 2 == 1 }"
        >
          <div class="_m-auto line-title">
            {{ item.name }}
          </div>
        </div>
        <template v-if="item.type === 0">
          <div class="_flex _flex-center _wrapper-x">
            <template
              v-for="contentItem in item.content"
              :key="contentItem.name"
            >
              <div class="line-content-item">
                <img class="_reflect" :src="contentItem.img" />
                {{ contentItem.name }}
              </div>
            </template>
          </div>
        </template>
        <template v-if="item.type === 1">
          <div
            class="_flex line-content line-content-01 _flex _flex-wrap _flex-center _flex-a-end"
          >
            <div class="line-content-01-background"></div>
            <div
              style="z-index: 1"
              class="_flex _flex-center _m-b-10 _wrapper-x"
            >
              <template v-for="contentItem in item.titles" :key="contentItem">
                <div
                  class="_p10 _font-title _m-r-20"
                  style="background: #fff; border: 1px solid #000"
                >
                  {{ contentItem }}
                </div>
              </template>
            </div>
            <template v-for="contentItem in item.content" :key="contentItem">
              <div class="line-content-item-01 _flex-shrink _m-b-5">
                {{ contentItem }}
              </div></template
            >
          </div>
        </template>
        <template v-if="item.type === 3">
          <div class="_flex _flex-center _wrapper-x">
            <template
              v-for="contentItem in item.content"
              :key="contentItem.name"
            >
              <div class="_border _p5 _m-r-20 _text-a-c">
                <img class="_img100" :src="contentItem.img" /><br />
                {{ contentItem.name }}
              </div>
            </template>
          </div>
        </template>
      </div>
    </template>
  </div>
</template>

<script>
import busData from "./bus-data";

export default {
  data() {
    return {
      busData: busData.sjyzt,
    };
  },
};
</script>

<style>
.box {
  padding: 50px;
}
.line {
  /* height: 120px; */
  margin-bottom: 10px;
}
.line-title-box {
  width: 60px;
  padding: 20px;
  margin-right: 50px;
  background-color: #888;
}
.line-title {
  font-size: 21px;
  text-align: center;
  font-weight: bold;
  color: #fff;
  letter-spacing: 20px;
}
.line-title-01 {
  background: #9dc3e7;
}
.line-content {
  width: 100%;
  position: relative;
}
.line-content-01 {
  padding: 20px 200px;
}
.line-content-01-background {
  background: linear-gradient(to right, #4eaadd, #f4f7cc);
  /* transform: rotate3d(0.5, 0.2, 0, 45deg); */
  transform: perspective(0.4em) rotateX(1.1deg);
  position: absolute;
  left: 12%;
  right: 15%;
  top: 0%;
  height: 80%;
  box-shadow: #ccc 4px 6px 2px;
  z-index: 0;
}
.line-content-item {
  width: 200px;
  padding: 10px;
  text-align: center;
  margin-right: 50px;
  font-size: 21px;
}
.line-content-item > img {
  width: 100%;
  height: 90px;
  border-radius: 10px;
}
.line-content-item-01 {
  padding: 5px 15px;
  background: linear-gradient(to bottom, #e1ebef, rgb(226, 235, 239, 0));
  z-index: 1;
  margin-right: 10px;
}
</style>
